<template>
  <a-card :bordered="false">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

          <!--<a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="比赛名称">
              <a-input placeholder="请输入比赛名称" v-model="queryParam.nameId"></a-input>
            </a-form-item>
          </a-col>-->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="赛事名称">
              <a-input placeholder="请输入赛事名称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <!--<template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="大区">
                <a-input placeholder="请输入大区" v-model="queryParam.region"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="已报名人数">
                <a-input placeholder="请输入已报名人数" v-model="queryParam.signPerson"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="报名人数下限">
                <a-input placeholder="请输入报名人数下限" v-model="queryParam.minPerson"></a-input>
              </a-form-item>
            </a-col>
            </template>-->
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <!--<a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>-->
            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!--<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button type="primary" icon="download" @click="handleExportXls('赛事管理')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>-->
      <!--<a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete"/>
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down"/>
        </a-button>
      </a-dropdown>-->
    </div>

    <!-- table区域-begin -->
    <div>
      <!--<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>-->

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :expandedRowKeys="expandedRowKeys"
        :loading="loading"
        class="j-table-force-nowrap"
        @change="handleTableChange"
        @expand="handleExpand">

        <span slot="action" slot-scope="text, record">
        <a-popconfirm v-if="record.start == '0' || record.start == '3' "  title="确定结束比赛吗?" @confirm="() => endGame(record.id)">
          <a>结束比赛</a>
        </a-popconfirm>
          <a-divider type="vertical" v-if="record.start == '0' || record.start == '3' "/>
          <router-link tag="a" target="_blank"
                       :to="{path:'/vsignup',query:{matchId:record.id}}">维护比赛结果</router-link>
        </span>
        <!--<span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
          &lt;!&ndash;<a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>&ndash;&gt;
        </span>-->
        <a-table
          slot="expandedRowRender"
          slot-scope="text"
          :columns="innerColumns"
          :dataSource="innerData"
          size="middle"
          bordered
          rowKey="id"
          :pagination="false"
          :loading="loading"
        >
          <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)" v-if="record.remark9 == '0'">维护比赛结果</a>

         <a-divider v-if="record.remark10 == '0' && record.remark9 == '0'" type="vertical"/>
            <a-popconfirm v-if="record.remark10 == '0'" title="确定退票吗?" @confirm="() => ticketReturn(record.id)">
                  <a>退票</a>
                </a-popconfirm>
          <!--<a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>-->
        </span>
        </a-table>
      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <!--<match-modal ref="modalForm" @ok="modalFormOk"></match-modal>-->
    <signUp-modal ref="modalForm" @ok="modalFormOk"></signUp-modal>
  </a-card>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import SignUpModal from '../vsignup/modules/SignUpModal'
  import MatchModal from './modules/MatchModal'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JEllipsis from '@/components/jeecg/JEllipsis'
  import { getAction } from '@/api/manage'
  import SignUpList from '../vsignup/SignUpList'

  export default {
    name: 'MatchList',
    mixins: [JeecgListMixin],
    components: {
      SignUpList,
      MatchModal, JEllipsis, SignUpModal
    },
    data() {
      // let ellipsis = (v, l = 10) => (< j-ellipsis value = { v } length = { l } />)
      return {
        description: '赛事报名管理页面',
        //子表表头
        innerColumns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '角色名称',
            align:"center",
            dataIndex: 'remark8'
          },
          {
            title: '昵称',
            align: 'center',
            dataIndex: 'wxName',
            key: 'wxName'
          },
          {
            title: '电话号',
            align: 'center',
            dataIndex: 'phone'
          },
          {
            title: '真实姓名',
            align: 'center',
            dataIndex: 'realName'
          },
          {
            title: '身份证号',
            align: 'center',
            dataIndex: 'idCard'
          },
          {
            title: '身份',
            align: 'center',
            dataIndex: 'identity_dictText'
          },
          {
            title: '是否点击进入房间',
            align: 'center',
            dataIndex: 'start_dictText'
          },
          {
            title: '比赛结果',
            align: 'center',
            dataIndex: 'result_dictText'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        innerData: [],
        expandedRowKeys: [],
        id: ' ',
        /*description: '列表展开子表报名用户信息',*/

        // 列表表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '比赛名称',
            align: 'center',
            dataIndex: 'nameId_dictText'
          },
          {
            title: '赛事名称',
            align: 'center',
            dataIndex: 'name'
          },
          {
            title: '大区',
            align: 'center',
            dataIndex: 'region_dictText'
          },
          {
            title: '已报名人数',
            align: 'center',
            dataIndex: 'signPerson'
          },
          /*{
            title: '报名人数下限',
            align: 'center',
            dataIndex: 'minPerson'
          },
          {
            title: '报名人数上限',
            align: 'center',
            dataIndex: 'maxPerson'
          },*/
          {
            title: '最低段位',
            align: 'center',
            dataIndex: 'lowestRank_dictText'
          },
          {
            title: '最高段位',
            align: 'center',
            dataIndex: 'highestRank_dictText'
          },
          /*{
            title: '报名开始时间',
            align: 'center',
            dataIndex: 'signUpTime',
            sorter: true
          },*/
          {
            title: '报名截至时间',
            align: 'center',
            dataIndex: 'signEndTime',
            sorter: true
          },
          {
            title: '比赛开始时间',
            align: 'center',
            dataIndex: 'startTime',
            sorter: true
          },
          /*{
               title: '比赛结束时间',
               align:"center",
               dataIndex: 'endTime'
              },*/
          /*{
               title: '赏金计划',
               align:"center",
               dataIndex: 'rewardScheme'
              },
              {
               title: '规则',
               align:"center",
               dataIndex: 'rule'
              },*/
          /*{
            title: '进入房间链接',
            align: 'center',
            dataIndex: 'inHomeUrl',
            customRender: (t) => ellipsis(t)
          },*/
          {
            title: '赛事进程',
            align: 'center',
            dataIndex: 'start_dictText'
          },
          /*{
               title: '奖励（备注）',
               align:"center",
               dataIndex: 'remark'
              },
              {
               title: 'remark1',
               align:"center",
               dataIndex: 'remark1'
              },
              {
               title: 'remark2',
               align:"center",
               dataIndex: 'remark2'
              },
              {
               title: 'remark3',
               align:"center",
               dataIndex: 'remark3'
              },
              {
               title: 'remark4',
               align:"center",
               dataIndex: 'remark4'
              },
              {
               title: 'remark5',
               align:"center",
               dataIndex: 'remark5'
              },
              {
               title: 'remark6',
               align:"center",
               dataIndex: 'remark6'
              },
              {
               title: 'remark7',
               align:"center",
               dataIndex: 'remark7'
              },
              {
               title: 'remark8',
               align:"center",
               dataIndex: 'remark8'
              },
              {
               title: 'remark9',
               align:"center",
               dataIndex: 'remark9'
              },
              {
               title: 'remark10',
               align:"center",
               dataIndex: 'remark10'
              },*/
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 分页参数
        type: 'radio',
        url: {
          list: '/match/match/list',
          delete: '/match/match/delete',
          ticketReturn: '/match/match/ticketReturn',
          deleteBatch: '/match/match/deleteBatch',
          exportXlsUrl: 'match/match/exportXls',
          importExcelUrl: 'match/match/importExcel',
          list1: '/signup/signUp/list',
          edit: '/signup/signUp/edit',
          endGame: '/signup/signUp/endGame'
        }
      }
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      }
    },
    methods: {
      routeReload(){
        this.reloadFlag = false
        let ToggleMultipage = "ToggleMultipage"
        this.$store.dispatch(ToggleMultipage,false)
        this.$nextTick(()=>{
          this.$store.dispatch(ToggleMultipage,true)
          this.reloadFlag = true
        })
      },
      handleExpand(expanded, record) {
        this.expandedRowKeys = []
        this.innerData = []
        if (expanded === true) {
          this.loading = true
          this.expandedRowKeys.push(record.id)
          getAction(this.url.list1, { matchId: record.id }).then((res) => {
            if (res.success) {
              this.loading = false
              this.innerData = res.result.records
            }
          })
        }
      },

      //退票
      ticketReturn: function (id) {
        if(!this.url.ticketReturn){
          this.$message.error("请设置url.ticketReturn属性!")
          return
        }
        console.log(id)
        var that = this;
        getAction(that.url.ticketReturn, {id: id}).then((res) => {
            if (res.success) {
            that.$message.success(res.message);
              that.loadData();
              that.routeReload();
            } else {
              that.$message.warning(res.message);
            }
        });
      },


      endGame: function (id) {
        if(!this.url.endGame){
          this.$message.error("请设置url.endGame属性!")
          return
        }
        console.log(id)
         var that = this;
         getAction(that.url.endGame, {id: id}).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
             that.loadData();
           } else {
             that.$message.warning(res.message);
           }
        });
      },
      handleEdit: function(record) {
        console.log(record)

        this.$refs.modalForm.edit(record)
        this.$refs.modalForm.title = '编辑'
        this.$refs.modalForm.disableSubmit = false
      },
    }
  }
</script>
<style scoped>
  /*@import '~@assets/less/common.less';*/
  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }
</style>